<template>
  <div class='user-list'>
    <user-list-head :userData=userData></user-list-head>
    <song-ranking :userData=userData @getUserRecord=getUserRecord :userRecordList=userRecordList></song-ranking>
    <playlist-created :userData=userData :userPlayList=userPlayList
      :createdPlayList=createdPlayList></playlist-created>
    <playlist-collected :userData=userData :userPlayList=userPlayList
    :collectPlayList=collectPlayList></playlist-collected>
  </div>
</template>

<script>
import userListHead from './userPages/userListHead'
import songRanking from './userPages/songRanking.vue'
import playlistCreated from './userPages/playlistCreated.vue'
import playlistCollected from './userPages/playlistCollected.vue'
export default {
    name: 'userList',
    data() {
        return {
            userData: '',
            userPlayList: [],
            createdPlayList: [],
            collectPlayList: [],
            userRecordList: []
        }
    },
    mounted() {
        this.userId = this.$route.query.id
        this.getUserDetail()
        this.getUserPlayList()
        this.getUserRecord(1)
    },
    components: {
        userListHead,
        songRanking,
        playlistCreated,
        playlistCollected,
    },
    methods: {
        // 获取用户信息
        async getUserDetail() {
            let self = this
            try {
                let param = {
                    uid: this.$route.query.id
                }
                let res = await this.$api.getUserDetail(param)
                if (res.data.code == 200) {
                    self.userData = res.data
                }
            } catch(err) {
                console.log(err)
            }
        },
        // 获取用户歌单
        async getUserPlayList() {
            let self = this
            try {
                let param = {
                    uid: this.$route.query.id
                }
                let res = await this.$api.getUserPlayList(param)
                if (res.data.code == 200) {
                    self.userPlayList = res.data
                    res.data.playlist.map(item => {
                        if (item.creator.userId == this.userId) {
                            this.createdPlayList.push(item)
                        } else {
                            this.collectPlayList.push(item)
                        }
                    })
                }
            } catch(err) {
                console.log(err)
            }
        },
        // 获取用户听歌排行
        async getUserRecord(type) {
            let self = this
            try {
                let param = {
                    uid: this.$route.query.id,
                    type: type
                }
                let res = await this.$api.getUserRecord(param)
                if (res.data.code == 200) {
                    self.userRecordList = res.data
                }
            } catch(err) {
                console.log(err)
            }
        }
    }
}
</script>

<style lang='less' scoped>
  .user-list {
      width: 1100px;
      height: auto;
      margin: 0 auto;
      padding: 40px;
      background-color: #fff;
  }
</style>